<template>
	<div>
		<el-form :inline="true" :model="searchForm" class="search-form" size="mini">
			<el-form-item label="手机号">
				<el-input v-model="searchForm.phone" placeholder="请输入手机号"></el-input>
			</el-form-item>
			<el-form-item label="昵称">
				<el-input v-model="searchForm.nickname" placeholder="请输入昵称"></el-input>
			</el-form-item>
			<el-form-item label="状态">
				<el-select v-model="searchForm.status" placeholder="选择状态">
					<el-option label="待审核" :value="0"></el-option>
					<el-option label="审核通过" :value="1"></el-option>
					<el-option label="审核不通过" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label='时间：'>
				<el-date-picker v-model='rangeTime' type='datetimerange' start-placeholder='开始' end-placeholder='结束' />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">搜索</el-button>
				<el-button @click="handleReset">重置</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="tableData" style="width: 100%" v-loading="loading" size="mini">
			<el-table-column type="index" label="序号" width="60" align="center" />
			<el-table-column prop="nickname" label="昵称"></el-table-column>
			<el-table-column prop="phone" label="手机号"></el-table-column>
			<el-table-column prop="amount" label="提现金额"></el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<el-tag :type="getStatusText(scope.row.status)">
						{{ getStatusText(scope.row.status) }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="时间"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope" v-if="scope.row.status === 0">
					<el-button size="mini" type="primary" icon="el-icon-check" @click="auditPass(scope.row)">
						通过
					</el-button>
					<el-button size="mini" type="primary" icon="el-icon-close" @click="auditReject(scope.row)">
						拒绝
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class='page'>
			<el-pagination @size-change='handleSizeChange' @current-change='handleCurrentChange'
				:current-page='pageParams.pageNum' :page-sizes='[5, 10, 15]' :page-size='pageParams.pageSize'
				layout='total, sizes, prev, pager, next' :total='total'></el-pagination>
		</div>
	</div>
</template>

<script>
import { page, audit } from '@/api/withdraw'
export default {
	data() {
		return {
			searchForm: {
				phone: null,
				startDateStr: null,
				endDateStr: null,
				status: null,
				nickname: null
			},
			rangeTime: [],
			tableData: [],
			// 分页参数
			pageParams: {
				pageNum: 1,
				pageSize: 10
			},
			total: 0,
			loading: false
		};
	},
	created() {
		this.fetchData()
	},
	methods: {
		async fetchData() {
			this.loading = true
			try {
				if (this.rangeTime.length > 0) {
					const startDateStr = formatDate(this.rangeTime[0], 'yyyy-MM-dd HH:mm:ss')
					const endDateStr = formatDate(this.rangeTime[1], 'yyyy-MM-dd HH:mm:ss')
					this.searchForm.startDateStr = startDateStr
					this.searchForm.endDateStr = endDateStr
				}
				const params = {
					...this.pageParams,
					...this.searchForm
				}
				const res = await page(params)
				this.tableData = res.records
				this.total = Number.parseInt(res.total)
			} catch (error) {
			} finally {
				this.loading = false
			}
		},
		// 每页条数改变
		handleSizeChange(val) {
			this.pageParams.pageSize = val
			this.fetchData()
		},
		// 当前页改变
		handleCurrentChange(val) {
			this.pageParams.pageNum = val
			this.fetchData()
		},
		// 搜索
		handleSearch() {
			this.pageParams.pageNum = 1 // 搜索时重置到第一页
			this.fetchData()
		},
		// 重置
		handleReset() {
			this.$refs.searchForm.resetFields()
			this.searchForm = {
				phone: null,
				startDateStr: null,
				endDateStr: null,
				status: null,
				nickname: null
			}
			this.rangeTime = []
			this.pageParams.pageNum = 1
			this.fetchData()
		},
		auditPass(row) {
			this.$confirm('确定要通过该申请吗?', '确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				audit({ id: row.id, status: 1 }).then(() => {
					this.$message.success('通过成功');
					this.fetchData(); // 刷新数据
				});
			}).catch(() => {
				this.$message.info('已取消通过');
			});
		},
		auditReject(row) {
			this.$confirm('确定要拒绝该申请吗?', '确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				audit({ id: row.id, status: 2 }).then(() => {
					this.$message.success('拒绝成功');
					this.fetchData(); // 刷新数据
				});
			}).catch(() => {
				this.$message.info('已取消拒绝');
			});
		},
		getStatusText(status) {
			switch (status) {
				case 0: return '待审核';
				case 1: return '审核通过';
				case 2: return '审核不通过';
				default: return '';
			}
		}
	},
	mounted() {
		this.fetchData();
	}
};
</script>

<style scoped>
.search-form {
	margin-bottom: 20px;
}

.pagination-container {
	margin-top: 20px;
	text-align: right;
}
</style>
